<template>
	<view class="bg-gray">
		<view class="width">
			<view class="flex-row-between moneyinfo">
				<image src="https://www.haopengsong.xyz/static/mine/moneybg.png" class="moneybg" mode="widthFix"></image>
				<view class="info">
					<view class="flex-row-between">
						<view class="font15">余额(元)</view>
						<view class="chongzhi" @click="jump('/pages/tabbar/user/chongzhi')">充值</view>
					</view>
					<view class="money">
						0
					</view>
				</view>
			</view>
			<view class="tabs flex-row-between width">
				<view class="tab cur font16">消费记录<image src="https://www.haopengsong.xyz/static/property/arr.png" class="arr"></image></view>
				<view class="tab font16">充值记录<image src="https://www.haopengsong.xyz/static/property/arr.png" class="arr"></image></view>
			</view>
			<listfive :rightfont= 'true'></listfive>
		</view>
	</view>
</template>

<script>
import storage from "@/utils/storage.js"; //缓存 
import listfive from "@/components/huashuiwan/listfive.vue";

export default {
	data() { 
		return {
			bgimg:'https://www.haopengsong.xyz/static/movie/songdetail.png',
			carouselImage:[
				{ name:'https://www.haopengsong.xyz/static/movie/songbg.png'}
			]
		};
	},
	components: {
		listfive,
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		
	},
	/**
	 * 页面显示
	 */
	onShow() {
		
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	mounted() {
		
	},
	methods: {
		jump(res){
			uni.navigateTo({
				url: res
			});
		}
	}
};
</script>

<style scoped lang="scss">
	.moneyinfo{
		background: linear-gradient( 286deg, #459539 0%, #71B36B 100%);
		border-radius: 12px;
		padding: 15px 12px 20px;
		.moneybg{
			width: 20%;
			height: 70px;
			border-radius: 50%;
		}
		.money{
			font-size: 30px;
		}
		.chongzhi{
			width: 78px;
			height: 28px;
			background-color: #fff;
			border-radius: 14px;
			color: #499C43;
			text-align: center;
			line-height: 28px;
			letter-spacing: 2px;
		}
		.info{
			width:76%;
			color: #fff;
			margin-left: 4%;
		}
	}
	.topinfo{
		margin-bottom: 10px;
	}
	.tab{
		margin: 15px auto 15px;
		.arr{
			margin: 8px auto 0;
			width: 18px;
			display: block;
			height: 5px;
			opacity: 0;
		}
	}
	.cur{
		color: #499C43;
		.arr{
			opacity: 1;
		}
	}
	.home{
		width: 35px;
		height: 35px;
		margin-right: 10px;
	}
	.qiehuan{
		width: 78px;
		height: 28px;
		text-align: center;
		line-height: 28px;
		border-radius: 28px;
		background-color: #499C43;
		color: #fff;
	}
</style>